<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>影院热映</title>
    <style>
        body {
            font-family: Microsoft YaHei, Helvetica, Arial, sans-serif;
            background-color: #fff;
            -webkit-font-smoothing: subpixel-antialiased;
        }

        .tags li a {
            color: #333;
            font-size: 14px;
            margin-left: 15px;
        }

        .tags-title {
            height: 24px;
            line-height: 24px;
            float: left;
            color: #999;
            font-size: 14px;
        }


        .subnav {
            background-color: #47464a;
            height: 60px;
            width: 100%;
            min-width: 1200px;
            text-align: center;
        }

        .subnav .navbar {
            display: inline-block;
            overflow: hidden;
        }

        .subnav li, .subnav ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .subnav .navbar li {
            display: inline-block;
            float: left;
        }


        .subnav .navbar li a {
            display: block;
            font-size: 16px;
            color: #999;
            height: 60px;
            line-height: 60px;
            padding: 0 40px;
        }


        .tags li a {
            color: #333;
            font-size: 14px;
        }

        a {
            background-color: transparent;
        }

        .container {
            width: 800px;
            margin: 0 auto;
        }


        .tags-line {
            padding: 10px 0 !important;
        }


        .tags-panel {
            width: 750px;
            border: 1px solid #e5e5e5;
            padding: 0 20px;
            margin-top: 40px;
        }

        .active {
            background: #f34d41;
            color: #fff !important;
        }

        .active1 {
            color: red !important;
        }

        .tags li {
            border-radius: 14px;
            padding: 3px 9px;
            display: inline-block;
            margin-left: 15px !important;
        }


        .tags-panel li, .tags-panel ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        .movies-sorter ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .sort-control-group {
            cursor: pointer;
            line-height: 16px;
        }

        .sort-control-label {
            font-size: 14px;
            vertical-align: top;
        }

        .movies-sorter li {
            display: inline-block;
            height: 16px;
            line-height: 18px;
            margin-right: 30px;
        }

        .sort-control-group {
            cursor: pointer;
            line-height: 16px;
        }

        .movies-sorter li {
            display: inline-block;
            height: 16px;
            line-height: 18px;
            margin-right: 30px;
        }

        .sort-control-group {
            cursor: pointer;
            line-height: 16px;
        }

        .sort-control-label {
            font-size: 14px;
            vertical-align: top;
        }


        .sort-control-group {
            cursor: pointer;
            line-height: 16px;
        }


        dl {
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
        }

        .movie-list dd {
            margin: 30px 0 0 30px;
            display: inline-block;
            vertical-align: top;
            position: relative;
        }

        dd {
            float: left;
            margin-top: 20px;
            display: block;
            margin-inline-start: 40px;
        }

        .movie-poster {
            background-color: #fcfcfc;
            width: 160px;
            height: 220px;
            overflow: hidden;
            position: relative;
        }

        .movie-poster .poster-default {
            top: 50%;
            left: 50%;
            width: 68px;
            height: 62px;
            margin-top: -31px;
            margin-left: -34px;
        }

        .movie-poster img {
            position: absolute;
        }

        img {
            border-style: none;
        }

        .movie-poster img {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        img {
            border-style: none;
        }

        .channel-action a {
            color: #fff;
            font-size: 12px;
            vertical-align: top;
        }

        channel-action {
            position: absolute;
            right: 5px;
            bottom: 5px;
            padding: 0 3px;
            height: 18px;
            line-height: 18px;
            border-radius: 1px;
        }

        a {
            text-decoration: none;
        }

        .navbar a:hover {
            color: white !important;
            text-decoration: none;
        }

        .channel-action a {
            color: #fff;
            font-size: 12px;
            vertical-align: top;
        }


        .channel-detail-orange {
            color: #ffb400;
        }


        .channel-detail a {
            color: #333;
        }

        movie-hover-title {
            font-size: 16px;
            line-height: 16px;
            color: #999;
            margin-top: 12px;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }


        channel-detail {
            width: 160px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: center;
            font-size: 16px;
            color: #333;
            margin-top: 10px;
        }

        .channel-detail-orange {
            color: #ffb400;
        }

        .dd-movie {
            margin-right: 30px;
            margin-bottom: 20px;
            float: left;
            width: 162px;
        }

        .movies-list {
            padding: 0;
            margin: 0;
            list-style-type: none;
            overflow: hidden;
        }

        .tags li a:hover {
            text-decoration: none;
        }

        .tags li a {
            display: inline-block;
            width: 60px;
            height: 30px;
            line-height: 30px;
            border-radius: 30px;
            text-align: center;
        }

        .movieName:hover {
            text-decoration: none;
            color: black;
        }
    </style>
    <link rel="stylesheet" href="css/headerCss.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<myheader :search="search"></myheader>
<div style="height: 80px"></div>
<section>
    <div class="subnav">
        <ul id="status" class="navbar">
            <li  v-for="(me,i) in movieStatusList">
                <a href="#" @click="fnStatus(me.id,i)" :class="{active: i == active}" >{{me.info}}</a>
            </li>
        </ul>
    </div>
    <div class="container" style="width: 800px">
        <div class="movies-channel">
            <div class="tags-panel">
                <ul class="tags-lines">
                    <li class="tags-line">
                        <div class="tags-title">类型:</div>
                        <ul id="category" class="tags">
                            <li>
                                <a @click="fnCategory(0,0)" :class="{active: 0 == active1}" style="cursor: default" href="#">全部</a>
                            </li>
                            <li href="#" v-for="(c,i) in categoryList">
                                <a @click="fnCategory(c.id,(i+1))" :class="{active: (i+1) == active1}" href="#">{{c.name}}</a>
                            </li>
                        </ul>
                    </li>
                    <li class="tags-line">
                        <div class="tags-title">区域:</div>
                        <ul id="region" class="tags">
                            <li>
                                <a @click="fnRegion(0,0)" :class="{active: 0 == active2}"
                                   style="cursor: default" href="#">全部</a>
                            </li>
                            <li v-for="(r,i) in regionList">
                                <a @click="fnRegion(r.id,(i+1))" :class="{active:(i+1) == active2}" href="#">{{r.name}}</a>
                            </li>


                        </ul>
                    </li>
                </ul>
            </div>
            <div style="margin: 20px 0">
             <span class="sort-control-group" style="cursor: default">
                               <input name="order" id="o1" checked type="radio"
                                      @click="fnOrder(0)"/>
                                <label for="o1"><span class="sort-control-label">按时间排序</span></label>
             </span>
                <span class="sort-control-group" style="cursor: default">
                               <input name="order" id="o2" type="radio"
                                      @click="fnOrder(1)"/>
                                <label for="o2"><span class="sort-control-label">按热度排序</span></label>
                            </span>
            </div>
            <ul class="movies-list">
                <li v-for="m in movielist" class="dd-movie" style="">
                    <div>
                        <a :href="'./movie-details.html?id='+m.movieId" target="_blank" data-act="movie-click">
                            <div class="movie-poster">
                                <img :src="m.movieUrl"
                                     alt="长津湖海报封面">
                            </div>
                        </a>
                    </div>
                    <div style="font-size: 20px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
                         class="channel-detail movie-item-title" style="font-size: 20px;text-align: center">
                        <a class="movieName" style="" :href="'./movie-details.html?id='+m.movieId">
                            {{m.movieName}}
                        </a>
                    </div>
                    <div style="color: blue;margin: 10px 0">
                        <span>热度：{{m.likePeople}}</span>
                    </div>
                    <div style="color: red;margin: 10px 0">
                        <span>{{m.playDate}}</span>
                    </div>
                    <div style="" class="channel-detail channel-detail-orange">
                        <span class="integer">评分：{{m.score}}</span>
                    </div>
                </li>


            </ul>
        </div>
    </div>
</section>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--引入处理时间格式的js文件-->
<script src="http://cdn.staticfile.org/moment.js/2.24.0/moment.js"></script>
<script src="js/header.js"></script>
<script>
    let vm = new Vue({
        el: "section",
        data: {
            movielist: [],
            categoryList: [],
            regionList: [],
            movieStatusList: [],
            statusId: 1,
            categoryId: 0,
            regionId: 0,
            orderId: 0,
            active:0,
            active1:0,
            active2:0
        },
        created: function () {
            //初始化
            axios.get("/movie/movielistByStatusId?movieStatusId=" + 1)
                .then(function (response) {
                    vm.movielist = response.data
                    for (let m of vm.movielist) {
                        m.playDate = moment(m.playDate)
                            .format("YYYY-MM-DD");
                        if (m.score == 0) {
                            m.score = "暂无";
                        }
                    }
                })
            //电影类型
            axios.get("/movie/getCategory").then(function (response) {
                vm.categoryList = response.data;
            })
            //电影地区
            axios.get("/movie/getRegion").then(function (response) {
                vm.regionList = response.data;
            })
            //电影状态热播，未上映，经典
            axios.get("/movie/getMovieStatus").then(function (response) {
                vm.movieStatusList = response.data;
            })
        },
        methods: {
            fnStatus: function (id,i) {
                vm.statusId = id;
                this.active=i;
                vm.$options.methods.getMovieList()

            },
            fnCategory: function (id,i) {
                vm.categoryId = id
                this.active1=i
                vm.$options.methods.getMovieList()
            },
            fnRegion: function (id,i) {
                vm.regionId = id
                vm.active2 = i
                vm.$options.methods.getMovieList()
            },
            fnOrder: function (id) {
                vm.orderId = id
                vm.$options.methods.getMovieList()
            },
            getMovieList: function () {
                axios.get("/movie/getMovieList?statusId=" +
                    vm.statusId + "&categoryId=" + vm.categoryId + "&regionId="
                    + vm.regionId + "&orderId=" + vm.orderId)
                    .then(function (response) {
                        vm.movielist = response.data;
                        for (let m of vm.movielist) {
                            m.playDate = moment(m.playDate)
                                .format("YYYY-MM-DD");
                            if (m.score == 0) {
                                m.score = "暂无";
                            }
                        }
                    }).catch(function (error) {
                    alert(error)
                })
            }
        }
    })
</script>
</body>
</html>